export class VolumeDisplay extends HTMLElement {
      constructor() {
        super();

        // 建立 Shadow DOM
        this.shadow = this.attachShadow({ mode: 'open' });

        // 创建样式（纯 JS）
        const style = document.createElement('style');
        style.textContent = `
          :host {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
          }
          .bar {
            height: 4px;
            margin: 2px auto;
            border-radius: 1px;
            transition: background-color 0.2s;
          }
        `;

        // 容器
        this.container = document.createElement('div');
        this.shadow.appendChild(style);
        this.shadow.appendChild(this.container);

        // 状态
        this.totalBars = 7;
        this.bars = [];
        this.colors = [
          '#4CAF50', '#66BB6A', '#81C784',
          '#4DD0E1', '#26C6DA', '#00BCD4',
          '#2196F3'
        ];
      }

      connectedCallback() {
        this.render();
        this.simulate(); // 测试用
      }

      render() {
        this.container.innerHTML = '';
        this.bars = [];

        // 获取宿主父元素宽度
        const parent = this.parentElement || this;
        const parentWidth = parent.clientWidth || 100;
        const maxWidth = parentWidth * 0.5;
        const minWidth = parentWidth * 0.2;
        for (let i = 0; i < this.totalBars; i++) {
          const bar = document.createElement('div');
          bar.classList.add('bar');
          const width = maxWidth - ((maxWidth - minWidth) / (this.totalBars - 1)) * i;
          bar.style.width = width + 'px';
          bar.style.backgroundColor = '#555';
          this.container.appendChild(bar);
          this.bars.push(bar);
        }
      }

      setVolume(level) {
        for (let i = 0; i < this.totalBars; i++) {
          if (i >= level) {
            this.bars[i].style.backgroundColor = this.colors[i];
          } else {
            this.bars[i].style.backgroundColor = '#555';
          }
        }
      }

      simulate() {
        let currentLevel = this.totalBars;
        setInterval(() => {
          this.setVolume(currentLevel);
          currentLevel = currentLevel === 0 ? this.totalBars : (currentLevel - 1);
        }, 500);
      }
    }

    customElements.define('volume-display', VolumeDisplay);